<template>
  <div>
    <h1>校园招聘信息平台</h1>
    <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
      active-text-color="#ffd04b" router>
      <el-menu-item index="/">首页</el-menu-item>
      <!-- <el-menu-item index="/info" >招聘信息</el-menu-item> -->
      <el-menu-item index="/compList">公司列表</el-menu-item>
      <el-menu-item index="/publish">发布</el-menu-item>
      <el-menu-item index="/msgboard">查看留言</el-menu-item>
      <!-- <el-menu-item index="/comments">留言</el-menu-item> -->
      <div class="username">
        <div id="userWarp">
          <el-menu-item index="/login">{{username || '登录'}}</el-menu-item>
          <el-menu-item index="/" v-if="username" @click="quit">{{username && '退出'}}</el-menu-item>
        </div>
      </div>

    </el-menu>
  </div>
</template>

<script>
import ajax from "@/components/ajax";

export default {
  name: "NavMenu",
  data() {
    return {
      activeIndex: "/",
      username: window.sessionStorage.getItem("username") || "",
      visible: false
    };
  },
  methods: {
    quit() {
      var that = this;
      console.log("quit");
      ajax({
        method: "get",
        url: "http://127.0.0.1:3000/quit",
        withCredentials: true,
        success(res) {
          that.$message({
            message: "退出成功",
            type: "success"
          });
          that.username = "";
          window.sessionStorage.setItem("isLogin", false);
          window.sessionStorage.setItem("username", "");
        }
      });
    }
  },
  created() {
    this.username = window.sessionStorage.getItem("username") || "";
  }
};
</script>

<style>
.username {
  float: right;
}

#userWarp {
  display: flex;
  justify-content: center;
}
</style>
